<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
<title>Hand In Hand</title>
<%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$('#friendRequests').show();
		$("#friends").hide();
	});
	function showFriends() {
		$('#friendRequests').hide();
		$('#friends').show();
	}
	function showFriendRequests() {
		$('#friendRequests').show();
		$('#friends').hide();
	}
</script>
<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/errors.jsp"%>

	<div class="container-fluid">
		<div class="btn-group" role="group" aria-label="...">
			<button style="margin-top: 5px;" class="btn btn-default"
				type="button" onclick="showFriendRequests();">Friend
				Requests</button>
			<button style="margin-top: 5px; margin-bottom: 5px;"
				class="btn btn-default" type="button" onclick="showFriends();">
				Friends</button>
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<div id="center" class="col-xs-6">
			<div id="friendRequests">
				<br> <br>
				<header style="font-size: 16pt;"> Friend Requests:</header>
				<br>
				<c:if test="${not empty friendshipRequestList}">
					<c:forEach var="friendshipRequest" items="${friendshipRequestList}">
		            	Request from: 
		            	<a class="list-group-item-warning"
							href="<spring:url value='/user/${friendshipRequest.sender.id}'></spring:url>">
							${friendshipRequest.sender.name} </a>
						<button class="btn btn-default" type="button"
							onclick="location.href='<spring:url value="/acceptFriendship/${friendshipRequest.sender.id}"></spring:url>'">
							Accept Request</button>
						<br>
						<br>
					</c:forEach>
				</c:if>
			</div>
			<div id="friends" class="col-xs-6">
				<br> <br>
				<header style="font-size: 16pt;"> Friends:</header>
				<br>
				<c:if test="${not empty friendshipList}">
					<c:forEach var="friendship" items="${friendshipList}">
						<div
							style="width: 400px; height: 130px; overflow: hidden; margin-top: 4px; margin-bottom: 4px; margin-left: 4px; margin-right: 4px; padding-bottom: 3px; padding-top: 3px;"
							class="col-xs-4">
							<div class="col-xs-3" style="padding-left: 0;">
								<img
									style="padding-top: 10px; padding-bottom: 5px; width: 70px;"
									src=<c:url value="resources/images/maleicon.jpg"/>
									class="img-rounded">
							</div>
							<c:choose>
								<c:when test="${friendship.firstUser.id != userId}">
									<a class="list-group-item-warning"
										href="<spring:url value='/user/${friendship.firstUser.id}'></spring:url>">
										${friendship.firstUser.name} </a>
								</c:when>
								<c:otherwise>
									<a class="list-group-item-warning"
										href="<spring:url value='/user/${friendship.secondUser.id}'></spring:url>">
										${friendship.secondUser.name} </a>
								</c:otherwise>
							</c:choose>
							<br>
							<br>
						</div>
					</c:forEach>
				</c:if>
			</div>
		</div>
	</div>


	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>

</body>
</html>